import React from 'react';

class App extends React.Component{
  constructor(props){
    super(props)
    this.state={
      inputValue: 'Hello!',
      lists: []
    }
  }
  render(){
    return (
        <div>
          <input value={this.state.inputValue} onChange={this.handleInput}>
          </input>
          <button onClick={this.handleSubmit}>提交</button>
          <ul>
            {
              this.state.lists.map((list, index)=>{
                return <li key={index} onClick={this.handleDelete.bind(null, index)}>{list}</li>
              })
            }
          </ul>
        </div>
    )
  }
  handleInput= (e)=> {
    this.setState({
      inputValue: e.target.value
    })
  }
  handleSubmit= ()=> {
    if(!this.state.inputValue)
      return
    let lists= [...this.state.lists]
    lists.push(this.state.inputValue)
    this.setState({
      lists,
      inputValue: ''
    })
  }
  handleDelete= (index)=> {
    let lists= [...this.state.lists]
    lists.splice(index, 1)
    this.setState({
      lists
    })
  }
}

export default App;
